@import './../../assert/stylus/cube/variable.styl'
@import './../../assert/stylus/variable.styl'
@import './../../assert/stylus/mixin.styl'

.category-item-container
  .category-title
    height: 26px;
    position: relative;
    .category-name
      background: $color-background-ssss;
      border-left: 2px solid #d9dde1;
      color: #666;
      font-size: 12px;
      height: 26px;
      line-height: 26px;
      padding-left: 14px;
      text-align: left;
      font-weight: 600;
  .food-item
    display: flex;
    margin: 18px;
    position: relative;
    &:after
      display: block;
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      border-top: 1px solid rgba(7,17,27,0.1);
      content: ' ';
    &:last-child
      border-none()
      margin-bottom: 0
    .icon
      flex: 0 0 57px;
      margin-right: 10px;
      img 
        border-radius: 2px
    .content
      flex: 1;
      text-align: left
      padding: 0 10px
      .name
        margin 2px 0 8px 0
        height 14px
        line-height 14px
        font-size $fontsize-medium
        color $color-dark-grey
      .desc, .extra
        line-height 10px
        font-size $fontsize-small-s
        color $color-light-grey
      .desc
        line-height: 16px
        margin-bottom: 8px
        word-break break-all
        overflow:hidden;
        white-space: normal; 
      .extra
        .count
          margin-right: 12px
      .price
        font-weight: 700
        line-height: 24px
        .now
          margin-right 8px
          font-size $fontsize-medium
          color $color-red
        .old
          text-decoration line-through
          font-size $fontsize-small-s
          color $color-light-grey
      .cart-control-wrapper
        position absolute
        right -15px
        bottom 0